<template>
  <a-card>
    <h2>已报名赛事</h2>
    <MatchForm v-model:show="showModal" action="add" race-list />
    <a-table :columns="columns" :data="matchList" :pagination="false">
      <template #matchType="{ record }">
        <a-tag>{{
          ['未知', '积分赛', '常规赛', '定段赛'][record.matchType]
        }}</a-tag>
      </template>
      <template #raceList="{ record }">
        <a-tag v-for="k in record.itemList" :key="k">{{
          raceList.get(k)
        }}</a-tag>
      </template>
      <template #approveStatus="{ record }">
        <a-space wrap>
          <a-tag :class="classColorTag(record.approveStatus)">{{['待审核', '报名成功','退赛成功','报名失败'][record.approveStatus]}}</a-tag>
        </a-space>
      </template>
      <template #option="{ record }">
        <a-space v-if="record.approveStatus === 0 || record.approveStatus === 1">
          <a-popconfirm content="是否退赛?" position="bottom" type="warning" @ok="handleDeleteOk(record)">
            <a-button class="button" status="danger" size="small">
              <template #icon><icon-minus-circle-fill /></template>
              退赛
            </a-button>
          </a-popconfirm>
        </a-space>
        <a-space v-if="record.approveStatus === 2 || record.approveStatus === 3">
          <a-popconfirm content="是否重新参赛?" position="bottom" type="warning" @ok="handleJoinOk(record)">
            <a-button class="button" type="primary" size="mini">
              <template #icon><icon-plus-circle-fill /></template>重新参赛
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <a-pagination style="margin-top: 10px" @change="pageChange" :total="total" :current="curPage" :page-size="pageSize" />
  </a-card>
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import axios from 'axios';
  import { onMounted, ref } from 'vue';

  const curPage = ref(1)
  const pageSize = ref(8)
  const total = ref(0)

  const columns = [
    {
      title: 'id',
      dataIndex: 'matchScheduleId',
    },
    {
      title: '赛事名称',
      dataIndex: 'matchTitle',
    },
    {
      title: '类型',
      slotName: 'matchType',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
    },
    {
      title: '项目',
      slotName: 'raceList',
    },
    {
      title: '姓名',
      dataIndex: 'nickName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '学校',
      dataIndex: 'schoolName',
    },
    {
      title: '状态',
      slotName: 'approveStatus',
    },
    {
      title: '操作',
      slotName: 'option',
    },
  ];
  const matchList = ref([] as any);
  const raceList = ref(new Map<number, string>());
  raceList.value = new Map([
    [1, '二阶'],
    [2, '三阶'],
    [3, '四阶'],
    [4, '五阶'],
    [5, '三盲'],
    [6, '单手'],
    [7, '金字塔'],
    [8, '斜转'],
  ]);
  const showModal = ref(false)
  const getData = () => {
    matchList.value = []
    axios.get(`match/list`, {
      params:{
        curPage: curPage.value,
        pageSize: pageSize.value
      }
    }).then(res => {
      console.log(res)
      curPage.value = res.current
      pageSize.value = res.size
      total.value = res.total
      res.records.forEach((element:any) => {
        // element.approveStatus = element.approveStatus === 0 ? '待审核' : '报名成功'
        matchList.value.push(element)
      });
    })
  }
  onMounted(async() => {
    await getData()
  })
  const classColorTag = (status: number) => {
    switch(status){
      // 待审核
      case 0:
        return 'yellow-tag'
      // 报名成功
      case 1:
        return 'green-tag'
      // 退赛成功
      case 2:
        return 'red-tag'
      // 报名失败
      case 3:
        return 'reds-tag'
      default:
        return ''
    }
  }
  const handleDeleteOk = (record: any) => {
    axios.put(`/match/retire/${record.matchScheduleId}/${2}`).then(res => {
      console.log(res)
      getData()
    })
  }

  const pageChange = (current:number) => {
    curPage.value = current
    getData()
  }

  const handleJoinOk = (record: any) => {
    axios.put(`/match/retire/${record.matchScheduleId}/${0}`).then(res => {
      console.log(res)
      getData()
    })
  }
</script>
<style scoped>
.yellow-tag {
  background-color: #ffaa00;
  color: white; /* 如果需要的话，可以设置文字颜色 */
}

.green-tag {
  background-color: #00b42a
;
  color: white; /* 如果需要的话，可以设置文字颜色 */
}

.red-tag {
  background-color: #f53f3f;
  color: white; /* 如果需要的话，可以设置文字颜色 */
}
.reds-tag {
  background-color: #a60000;
  color: white; /* 如果需要的话，可以设置文字颜色 */
}
</style>